<template>
  <div class="condition-edit">
    <el-button class="condition-add" :size="size" type="primary" plain icon="circle-plus" @click="addConditions">新增条件</el-button>
    <div class="box-card" v-for="(flowJudge, jindex) in flowJudges">
      <el-form ref="conditionForm" :model="flowJudge" :rules="flowJudgeRules" label-width="80px">
        <el-card class="box-card-ctn" shadow="never">
          <el-row>
            <el-col :span="14">
              <el-form-item label="条件类型" prop="conditionType">
                <el-select v-model="flowJudge.conditionType" :size="size" :disabled="disabled" filterable clearable placeholder="请选择">
                  <el-option v-for="item in conditionTypes" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" :offset="6" class="condition-delete">
              <el-form-item>
                <el-button v-if="!disabled" type="info" plain icon="delete" circle @click="clear(jindex)"></el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="flowJudge.conditionType == '1'">
            <el-col :span="7">
              <el-form-item label="实体属性" prop="leftEntityId">
                <el-select v-model="flowJudge.leftEntityId" :size="size" :disabled="disabled" filterable clearable placeholder="实体">
                  <el-option v-for="item in curEntityList" :key="item.entityId" :label="item.entityName" :value="item.entityId" @click.native="changeLeftEntity(item)">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="" prop="leftProperty" label-width="10px">
                <el-select v-model="flowJudge.leftProperty" :size="size" :disabled="disabled" filterable clearable placeholder="实体属性">
                  <el-option v-for="(item,index) in childList[`${flowJudge.leftEntityId}list`]" :key="index" :label="item.label" :value="item.itemId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="" prop="sysbol" label-width="10px">
                <el-select v-model="flowJudge.sysbol" :size="size" :disabled="disabled" filterable clearable placeholder="比较符">
                  <el-option v-for="item in sysbols" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="" prop="rightEntityId" label-width="10px">
                <el-select v-model="flowJudge.rightEntityId" :size="size" :disabled="disabled" filterable clearable placeholder="实体">
                  <el-option v-for="item in curEntityList" :key="item.entityId" :label="item.entityName" :value="item.entityId" @click.native="changeRightEntity(item)">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="" prop="rightProperty" label-width="10px">
                <el-select v-model="flowJudge.rightProperty" :size="size" :disabled="disabled" filterable clearable placeholder="实体属性">
                  <el-option v-for="(item, index) in childList[`${flowJudge.rightEntityId}list`]" :key="index" :label="item.label" :value="item.itemId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-else-if="flowJudge.conditionType == '3'">
            <el-col :span="8">
              <el-form-item label="实体属性" prop="leftEntityId">
                <el-select v-model="flowJudge.leftEntityId" :size="size" :disabled="disabled" filterable clearable placeholder="实体">
                  <el-option v-for="item in curEntityList" :key="item.entityId" :label="item.entityName" :value="item.entityId" @click.native="changeLeftEntity(item)">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="" prop="leftProperty" label-width="10px">
                <el-select v-model="flowJudge.leftProperty" :size="size" :disabled="disabled" filterable clearable placeholder="实体属性">
                  <el-option v-for="(item,index) in childList[`${flowJudge.leftEntityId}list`]" :key="index" :label="item.label" :value="item.itemId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="" prop="sysbol" label-width="10px">
                <el-select v-model="flowJudge.sysbol" :size="size" :disabled="disabled" filterable clearable placeholder="请选择比较符">
                  <el-option v-for="item in sysbols" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="" prop="rightValue" label-width="10px">
                <el-input v-model="flowJudge.rightValue" :size="size" :disabled="disabled" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <div class="box-card-connect">
          <el-row>
            <el-col :span="8" :offset="8" v-if="jindex < flowJudges.length - 1">
              <el-form-item label="" prop="conditionRel" label-width="0px">
                <el-radio-group v-model="flowJudge.conditionRel" :disabled="disabled">
                  <el-radio v-for="item in relList" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <!-- <el-form ref="conditionBackForm" :model="backForm" :rules="backFormRules" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="否判断直接返回" label-width="130px" prop="isJudgeNode">
            <el-select v-model="backForm.isJudgeNode" :size="size" filterable clearable placeholder="是否为判断节点下的否节点">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form> -->
  </div>
</template>
<script>
import CONSTANT from '@/api/constant';
import { entityItemList } from '@/api/baseConfig/entity';
export default {
  name: 'ConditionEdit',
  props: {
    //实体列表
    curEntityList: {
      type: Array,
      default: () => []
    },
    size: String,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      childList: {},
      sysbols: CONSTANT.ruleConfig.sysbols,
      relList: [
        { label: 'and', value: 'and' },
        { label: 'or', value: 'or' },
      ],
      conditionTypes: [
        { label: '实体属性', value: '1' },
        { label: '枚举|输入值', value: '3' },
      ],
      options: [
        { label: '是', value: '1' },
        { label: '否', value: '0' },
      ],
      flowJudges: [],
      // backForm: {
      //   isJudgeNode: '0',
      // },
      flowJudgeRules: {
        conditionType: [{ required: true, message: '不能为空'}],
        leftEntityId: [{ required: true, message: '不能为空'}],
        leftProperty: [{ required: true, message: '不能为空'}],
        sysbol: [{ required: true, message: '不能为空'}],
        rightEntityId: [{ required: true, message: '不能为空'}],
        rightProperty: [{ required: true, message: '不能为空'}],
        rightValue: [{ required: true, message: '不能为空'}],
        conditionRel: [{ required: true, message: '不能为空'}]
      },
      // backFormRules: {
      //   isJudgeNode: [{ required: true, message: '不能为空', trigger: 'change' }]
      // }
      
    }
  },
  methods: {
    //新增条件
    addConditions() {
      let flowJudge = {
        sysbol: '',
        flowShapeId: '',
        flowId: null,
        leftProperty: null,
        rightProperty: null,
        entityId: null,
        leftEntityId: null,
        rightEntityId: null,
        conditionType: '',
        conditionRel: '',
        showRel: false,
        rightValue: ''
      };
      if (this.flowJudges.length > 0) {
        this.flowJudges[this.flowJudges.length - 1].showRel = true;
        this.flowJudges[this.flowJudges.length - 1].conditionRel = 'and';
      }
      this.flowJudges.push(flowJudge);
    },
    // 删除条件
    clear(jindex) {
      this.flowJudges.splice(jindex, 1);
    },
    // 左实体
    changeLeftEntity(item) {
      let params = {
        id: item.entityId + '',
      };
      let name = item.entityId + 'list';
      this.childList[name] = [];
      entityItemList(params).then(res => {
        if (res.data.data) {
          res.data.data.forEach(item => {
            item['label'] = item.itemName + '--' + item.itemIdentify;
            this.childList[name].push(item);
          });
          this.$forceUpdate();
        }
      });
    },
    // 右实体
    changeRightEntity(item) {
      let params = {
        id: item.entityId + '',
      };
      let name = item.entityId + 'list';
      this.childList[name] = [];
      entityItemList(params).then(res => {
        if (res.data.data) {
          res.data.data.forEach(item => {
            item['label'] = item.itemName + '--' + item.itemIdentify;
            this.childList[name].push(item)
          });
          this.$forceUpdate();
        }
      });
    },
    // 更新属性下拉框翻译
    update() {
      if (this.flowJudges && this.flowJudges.length > 0) {
        this.flowJudges.forEach(item => {
          if (item.conditionType == '1') {
            for (let i = this.curEntityList.length - 1; i > -1; i--) {
              if(item.leftEntityId === this.curEntityList[i].entityId) {
                this.changeLeftEntity(this.curEntityList[i]);
              } else if (item.rightEntityId === this.curEntityList[i].entityId) {
                this.changeRightEntity(this.curEntityList[i]);
              }
            }
          } else if (item.conditionType == '3') {
            for (let i = this.curEntityList.length - 1; i > -1; i--) {
              if(item.leftEntityId === this.curEntityList[i].entityId) {
                this.changeLeftEntity(this.curEntityList[i]);
                break;
              }
            }
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.condition-edit {
  .box-card {
    .box-card-ctn {
      margin: 10px 0;
      // border: 1px solid #ececec;
      // padding: 10px;
      .condition-delete {
        text-align: right;
      }
    }

    .box-card-connect {
      .el-row {
        text-align: center;  
      }
    }
  }
  .el-row {
    &:first-child {
      margin-top: 0;
    }
    margin-top: 10px;
  }
  /deep/.el-form-item {
    margin-bottom: 0;
    /* .el-input--mini {
      .el-input__icon {
        line-height: 40px;
      }
    } */
  }
}
</style>